<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/pages/web/index.js"></script>

</head>
<body>
	<!-- <div
		style="border: #aaaaaa 3px solid; margin-left: 2px; display: inline; width: 540px; float: left">
		<ul class="kwicks">
			<li id="kwick1"><img width="270px" height="150px"
				src="${pageContext.request.contextPath}/pages/web/test/1.jpg" />
			</li>
			<li id="kwick2"><img width="270px" height="150px"
				src="${pageContext.request.contextPath}/pages/web/test/2.jpg" />
			</li>
			<li id="kwick3"><img width="270px" height="150px"
				src="${pageContext.request.contextPath}/pages/web/test/3.jpg" />
			</li>
		</ul>
	</div>-->
	<style type="text/css">
.container,.container img {
	width: 540px;
	height: 200px;
}

.container img {
	border: 0;
	vertical-align: top;
}

.container ul,.container li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.num {
	position: absolute;
	right: 5px;
	bottom: 5px;
	font: 12px/1.5 tahoma, arial;
	height: 18px;
}

.num li {
	float: left;
	color: #d94b01;
	text-align: center;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-family: Arial;
	font-size: 11px;
	cursor: pointer;
	margin-left: 3px;
	border: 1px solid #f47500;
	background-color: #fcf2cf;
}

.num li.on {
	line-height: 18px;
	width: 18px;
	height: 18px;
	font-size: 14px;
	margin-top: -2px;
	background-color: #ff9415;
	font-weight: bold;
	color: #FFF;
}
</style>
	<div class="container" id="idContainer2"
		style="border: #aaaaaa 1px solid;">
		<ul id="idSlider2" style="">
			<s:iterator value="placards" status="rowstatus">
				<li><a href="<s:property value="url"/>"> <img
						src="${pageContext.request.contextPath}/<s:property value="placardFile.urlPath"/>"
						alt="<s:property value="title"/>" />"></img>
				</a>
				</li>
			</s:iterator>
		</ul>
		<ul class="num" id="idNum">
		</ul>
	</div>
	
	<div id=""
		style="border: #FDE4BB 1px solid; width: 540px; height: 200px; margin-top: 5px;">
		<img src="${pageContext.request.contextPath}/pages/web/address.jpg"
			height="200px" width="265px" style="border-right: #FDE4BB 1px solid;"></img>
		<img src="${pageContext.request.contextPath}/pages/web/orderNow.gif"
			height="200px" width="265px"></img>
	</div>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/pages/web/SlideTrans.js"></script>
	<script type="text/javascript">
var nums = [], timer, n = $$("idSlider2").getElementsByTagName("li").length,
	st = new SlideTrans("idContainer2", "idSlider2", n, {
		onStart: function(){//设置按钮样式
			forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; })
		}
	});
for(var i = 1; i <= n; AddNum(i++)){};
function AddNum(i){
	var num = $$("idNum").appendChild(document.createElement("li"));
	num.innerHTML = i--;
	num.onmouseover = function(){
		timer = setTimeout(function(){ num.className = "on"; st.Auto = false; st.Run(i); }, 200);
	}
	num.onmouseout = function(){ clearTimeout(timer); num.className = ""; st.Auto = true; st.Run(); }
	nums[i] = num;
}
st.Run();
</script>
</body>
</html>